UI changes

7 files changed, 171 insertions, 195 deletions

diff --git a/src/app/anime/[id]/[...animeId]/page.jsx b/src/app/anime/[id]/[...animeId]/page.jsx
deleted file mode 100644
index f5505e5..0000000
--- a/src/app/anime/[id]/[...animeId]/page.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { MediaPlayer, MediaProvider } from "@vidstack/react";
-import "@vidstack/react/player/styles/base.css";
-import "@vidstack/react/player/styles/plyr/theme.css";
-import {
-	PlyrLayout,
-	plyrLayoutIcons,
-} from "@vidstack/react/player/layouts/plyr";
-import styles from "./video.module.css";
-import { redirect } from "next/navigation";
-import Link from "next/link";
-
-export const runtime = 'edge';
-
-export default async function Video({ params }) {
-	let link;
-	const id = params.animeId[0];
-	const series = params.animeId[1];
-
-	// Getting the episode number and the anime name. Kindly ignore!
-	const words = id.split("-");
-	const last_two = words.slice(-2).join(" ");
-	const remainingWords = words.slice(0, -2).join(" ");
-
-	const data = await getVideoLink(id);
-	const animedata = await getAnimeInfo(series);
-
-	if (data.message) {
-		redirect("/404");
-	}
-
-	try {
-		link = data.sources[4].url;
-	} catch (error) {
-		try {
-			link = data.sources[3].url;
-		} catch (error) {
-			console.log("Episode not found.");
-			redirect("/404");
-		}
-	}
-
-	return (
-		<div className={styles.VideoMain}>
-			<div className={styles.VideoContainer}>
-				<p style={{ textAlign: "center", color: "white" }}>
-					{last_two} - {remainingWords}
-				</p>
-				<div className={styles.Video}>
-					<MediaPlayer
-						title={words}
-						src={link}
-						aspectRatio="16/9"
-						load="eager"
-						className={styles.VideoPlayer}
-					>
-						<MediaProvider />
-						<PlyrLayout icons={plyrLayoutIcons} />
-					</MediaPlayer>
-					<div className={styles.EpisodesButtons}>
-						{animedata &&
-							animedata.episodes.map((item, index) => (
-								// <p key={index}>Hello World</p>
-								<Link
-									href={`/anime/watch/${item.id}/${series}`}
-									key={index}
-								>
-									<button>{item.number}</button>
-								</Link>
-							))}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-async function getVideoLink(id) {
-	const res = await fetch(
-		"https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id
-	);
-	const data = res.json();
-	return data;
-}
-
-async function getAnimeInfo(anime_id) {
-	const res = await fetch(
-		"https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id,
-		{ next: { revalidate: 7200 } }
-	);
-	const data = await res.json();
-	return data;
-}
diff --git a/src/app/anime/[id]/[...animeId]/video.module.css b/src/app/anime/[id]/[...animeId]/video.module.css
deleted file mode 100644
index 0214e60..0000000
--- a/src/app/anime/[id]/[...animeId]/video.module.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.Video {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.VideoPlayer {
-	border-radius: 10px;
-	width: 70%;
-	height: auto;
-}
-
-.EpisodesButtons {
-	display: flex;
-	flex-direction: column;
-	margin-left: 10px;
-	height: 500px;
-	overflow-y: auto;
-	width: 100px;
-	scrollbar-width: thin;
-}
-
-.EpisodesButtons button {
-	width: 70px;
-	margin: 5px;
-	outline: none;
-	border: none;
-	padding: 5px;
-	font-family: "Quicksand";
-	font-size: 14px;
-	border-radius: 5px;
-	cursor: pointer;
-	color: white;
-	background-color: #3d3d3d;
-	transition: background-color 0.2s linear;
-}
-
-.EpisodesButtons button:hover {
-	background-color: #1f1f1f;
-	transition: background-color 0.2s linear
-}
-
-@media screen and (max-width: 768px) {
-
-	.VideoMain {
-		max-width: 99%;
-	}
-
-	.Video {
-		display: block;
-	}
-
-	.VideoPlayer {
-		width: 100%;
-	}
-
-	.EpisodesButtons {
-		display: flex;
-		flex-direction: row;
-		height: auto;
-		width: auto;
-		margin-top: 10px;
-		margin-left: 0px;
-		overflow-y: auto;
-	}
-
-	.EpisodesButtons button {
-		width: 50px;
-	}
-}
\ No newline at end of file
diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
new file mode 100644
index 0000000..eac1884
--- /dev/null
+++ b/src/app/anime/[id]/buttons.jsx
@@ -0,0 +1,88 @@
+"use client";
+
+import styles from "./info.module.css";
+import { useState } from "react";
+import { fetch_video_link } from "../videoLinkfetcher";
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+
+export default function Button({ data2: info }) {
+	const [videoLink, setVideoLink] = useState(null);
+
+	async function video(id) {
+		const link = await fetch_video_link(id);
+		if (link === undefined) {
+			alert("Sorry, but not links were found");
+		} else {
+			setVideoLink(link);
+			console.log(videoLink);
+		}
+	}
+
+	return (
+		<main>
+			<h2 className={styles.buttonHeader}>Episodes: </h2>
+			<div className={styles.buttonContainer}>
+				{info &&
+					info.episodes &&
+					info.episodes.map((item, index) => (
+						<button
+							className={styles.dramaButton}
+							key={index}
+							onClick={(event) => {
+								event.target.style.backgroundColor =
+									"var(--soft-purple)";
+								video(item.id);
+							}}
+						>
+							{item.number}
+						</button>
+					))}
+			</div>
+
+			{videoLink && (
+				<div
+					className={styles.videoPopUp}
+					id="popup"
+					onKeyDown={(event) => {
+						if (event.code === "Escape") {
+							setVideoLink("");
+						}
+					}}
+				>
+					<div className={styles.video}>
+						<MediaPlayer
+							title="dramaPlayer"
+							src={videoLink}
+							aspectRatio="16/9"
+							load="eager"
+							className={styles.VideoPlayer}
+							playsInline
+							id="videoPlayer"
+							volume={0.2}
+							onQualityChange={(event) =>
+								console.log("changed qualities", event)
+							}
+						>
+							<MediaProvider />
+							<PlyrLayout icons={plyrLayoutIcons} />
+						</MediaPlayer>
+						<button
+							className={styles.closeButton}
+							onClick={() => {
+								setVideoLink("");
+							}}
+						>
+							Close
+						</button>
+					</div>
+				</div>
+			)}
+		</main>
+	);
+}
diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index e8bfc54..6299405 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -52,10 +52,15 @@
 	color: #ffffff81
 }
 
+.buttonContainer button {
+	transition: transform 200ms ease-in-out;
+
+}
+
 .buttonContainer button:focus {
 	opacity: 0.7;
-	transition: transform 0.2s linear;
-	background-color: var(--pastel-red);
+	transition: transform 200ms ease-in;
+	background-color: var(--soft-purple);
 	transform: scale(0.9);
 }
 
@@ -68,7 +73,7 @@
 	padding: 10px;
 	font-family: "Quicksand";
 	font-size: 14px;
-	margin: 5px;
+	margin: 5px 5px 5px 5px;
 	width: 55px;
 	border-radius: 5px;
 	text-align: center;
@@ -76,13 +81,13 @@
 	outline: none;
 	color: white;
 	background-color: #3d3d3d;
-	transition: background-color 0.2s linear;
+	transition: background-color 200ms ease-in-out;
 	cursor: pointer;
 }
 
 .dramaButton:hover {
 	background-color: #1f1f1f;
-	transition: background-color 0.2s linear
+	transition: background-color 200ms ease-in
 }
 
 .infoPageContainer p {
@@ -111,9 +116,57 @@
 	color: var(--soft-purple)
 }
 
+.videoPopUp {
+	height: 100dvh;
+	width: 100dvw;
+	background-color: #1f1f1fd3;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+	overflow-y: auto;
+}
+
+.video {
+	display: flex;
+	flex-direction: column;
+}
+
+.closeButton {
+	font-family: "Poppins", serif;
+	font-size: 16px;
+	background-color: var(--pastel-red);
+	padding: 4px 10px;
+	border: 0;
+	outline: 0;
+	border-radius: 0.5rem;
+	cursor: pointer;
+	margin: 5px;
+	width: auto;
+}
+
+.VideoPlayer {
+	width: 60dvw;
+	
+}
+
+
 @media screen and (max-width: 768px) {
 
+	.titleContainer p {
+		font-size: 28px;
+	}
+
 	.animeDetails {
 		font-size: 14px;
 	}
+
+	.VideoPlayer {
+		width: 100%;
+	}
 }
\ No newline at end of file
diff --git a/src/app/anime/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx
index 71ff978..24e8c83 100644
--- a/src/app/anime/[id]/loading.jsx
+++ b/src/app/anime/[id]/loading.jsx
@@ -1,9 +1,9 @@
 import styles from "./loading.module.css";
 
-export default function Loading() {
+export default async function Loading() {
 	return (
-		<div className={styles.loadingContainer}>
-			<p className={styles.loadingText}>Hold tight...Arriving!!</p>
+		<div className={styles.Main}>
+			<div className={styles.LoadingContainer}></div>
 		</div>
 	);
 }
diff --git a/src/app/anime/[id]/loading.module.css b/src/app/anime/[id]/loading.module.css
index 63604d5..14dfcf3 100644
--- a/src/app/anime/[id]/loading.module.css
+++ b/src/app/anime/[id]/loading.module.css
@@ -1,12 +1,22 @@
-.loadingContainer {
+.Main {
+	height: 100vh;
+	width: 100vw;
 	display: flex;
-	align-items: center;
 	justify-content: center;
-	height: 100dvh;
+	align-items: center;
+}
+
+.LoadingContainer {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	border: 8px solid;
+	border-color: #F4F4F4 #0000;
+	animation: s1 1s infinite;
 }
 
-.loadingText {
-	color: white;
-	font-family: "Lato";
-	font-size: 20px;
+@keyframes s1 {
+	to {
+		transform: rotate(.5turn)
+	}
 }
\ No newline at end of file
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index 598c8a7..14fb36a 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -1,14 +1,15 @@
 import styles from "./info.module.css";
 import Image from "next/image";
-import Link from "next/link";
-
-export const runtime = 'edge';
+import Button from "./buttons";
+import { preFetchAnimeLinks } from "../videoLinkfetcher";
 
 export default async function AnimeInfo({ params }) {
 	let animeID = params.id;
 
 	const info = await getAnimeInfo(animeID);
 
+	preFetchAnimeLinks(info);
+
 	return (
 		<div className={styles.dramaInfoContainer}>
 			<div className={styles.dramaInfo}>
@@ -50,21 +51,7 @@ export default async function AnimeInfo({ params }) {
 					</p>
 				</div>
 
-				<h2 className={styles.buttonHeader}>Episodes: </h2>
-				<div className={styles.buttonContainer}>
-					{info &&
-						info.episodes &&
-						info.episodes.map((item, index) => (
-							<Link
-								href={`/anime/watch/${item.id}/${animeID}`}
-								key={index}
-							>
-								<button className={styles.dramaButton}>
-									{item.number}
-								</button>
-							</Link>
-						))}
-				</div>
+				<Button data2={info} />
 			</div>
 		</div>
 	);